<template>
  <pre :class="cns"><slot></slot></pre>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";
declare var PR: { prettyPrint: () => void };
export default defineComponent({
  props: {
    lang: { type: String, defualt: "typescript" },
  },
  setup(props) {
    const cns = computed(() => {
      const cns = ["ph-pretty", "prettyprint", "linenums"];
      cns.push("lang-" + props.lang);
      return cns;
    });
    onMounted(() => {
      setTimeout(() => {
        PR.prettyPrint();
      });
    });
    return { cns };
  },
});
</script>
<style lang="scss">
.ph-pretty {
  visibility: hidden;
  width: 100%;
  display: block;
  line-height: 1.5;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 1em;
  border-radius: 5px 0 0 5px;
  background-color: #333;
  padding: var(--ph-15);
  position: relative;
  overflow: hidden;
  margin: 1em 0;

  li {
    list-style: decimal;
    white-space: nowrap;
  }
  &:before {
    content: "";
    position: absolute;
    background-color: #262626;
    width: 4em;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 0;
  }
  &.prettyprinted {
    visibility: visible;
  }
  .linenums {
    position: relative;
    color: #666;
    margin: 0;
    padding-left: 50px;
    height: 100%;
    overflow: auto;
  }
}
/* desert scheme ported from vim to google prettify */
pre .nocode {
  background-color: none;
  color: #000;
}
pre .str {
  color: #f0e68c;
} /* string  - pink */
pre .kwd {
  color: #c0456a;
  font-weight: bold;
}
pre .com {
  color: #87ceeb;
} /* comment - skyblue */
pre .typ {
  color: #fff;
} /* type    - lightgreen */
pre .lit {
  color: #2db6cd;
} /* literal - darkred */
pre .pun {
  color: #fff;
} /* punctuation */
pre .pln {
  color: #fff;
  white-space: pre;
} /* plaintext */
pre .tag {
  color: #d12257;
  font-weight: bold;
} /* html/xml tag    - lightyellow */
pre .atn {
  color: #add318;
  font-weight: bold;
} /* attribute name  - khaki */
pre .atv {
  color: #fff;
} /* attribute value - pink */
pre .dec {
  color: #98fb98;
} /* decimal         - lightgreen */

ol.linenums > li {
  padding-left: 0.5em;
}
pre.prettyprint {
  display: block;
}
</style>
